<!--
 * @Description: 
 * @Author: xuzp4
 * @Date: 2022-12-12 16:59:53
 * @LastEditors: xuzp4
 * @LastEditTime: 2022-12-15 15:48:25
 * @FilePath: \vue_demo\src\view\threejs\textures.vue
-->
<template>
  <canvas class="webgl"></canvas>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import colorImg from "../../assets/texture/color.jpg";
export default {
  mounted() {
    /**
     * textures
     */
    const image = new Image();
    const texture = new THREE.Texture(image)
    image.onload = () => {
      texture.needsUpdate = true;
    };
    image.src = colorImg;
    const cursor = {
      x: 0,
      y: 0,
    };
    window.addEventListener("mousemove", (event) => {
      cursor.x = event.clientX / sizes.width - 0.5;
      cursor.y = -(event.clientY / sizes.height - 0.5);
    });
    const canvas = document.querySelector(".webgl");
    // Scene
    const scene = new THREE.Scene();
    const geometry = new THREE.BoxGeometry(1, 1, 1, 5, 5, 5);
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
    
    const sizes = {
      width: 800,
      height: 600,
    };
    // Camera
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height);
    camera.position.z = 3;
    camera.lookAt(group.position);
    scene.add(camera);

    // constrols
    const controls = new OrbitControls(camera, canvas);
    controls.enableDamping = true;
    const renderer = new THREE.WebGLRenderer({
      canvas,
    });
    renderer.setSize(sizes.width, sizes.height);
    renderer.render(scene, camera);

    // animation
    const tick = () => {
      controls.update();
      renderer.render(scene, camera);
      window.requestAnimationFrame(tick);
    };
    tick();
  },
};
</script>

<style>
</style>